<script setup>
import { ref } from 'vue'
const todos = [
  { id: 1, title: '学习 Vue3 渲染指令', completed: false },
  { id: 2, title: '完成这个练习任务', completed: false },
  { id: 3, title: '复习 JavaScript 基础知识', completed: true },
  { id: 4, title: '阅读 Vue3 官方文档', completed: false }
]
let flag = ref(true)

function todosTitle(todo) {
  if (flag.value) { 
    if (todo.completed) {
    return '✓' + todo.title + '（已完成）'
  } else {
    return '○' + todo.title + '（未完成）'
  }
  } else {
    return todo.completed ? '' :'○' + todo.title + '（未完成）'
  }
  
}

</script>

<template>
<h1>待完成任务列表</h1>
<button @click="flag =!flag">{{ flag ? '显示已完成任务' : '隐藏已完成任务' }}</button>
<ul>
  <li v-for="todo in todos">
    {{ todosTitle(todo) }}
  </li>
</ul>
</template>

<style scoped>

</style>
